{
    title:  'Expansive Scripting',
    crumbs: [ 
        { "User's Guide": "index.html" },
    ],
}
   
            <h1>Scripting</h1>
            <p>Expansive supports powerful server-side Javascript in files with a <em>.exp</em> extension. 
            These scripts are run at <em>render time</em> to enable you to create web page content dynamically.
            This is great for creating pages based on database data or other dynamic data for which static web pages
            cannot represent.</p>

            <h2>Javascript ES6</h2>
            <p>Expansive uses the Javascript ES6 for embedded scripts. This means you have the same great language
            for server-side scripting as you have in the browser &mdash; less learning, more leverage.</p>

            <p>Expansive processes embedded scripting at "render-time" using the
            the <a href="https://embedthis.com/ejscript/">Ejscript</a> Javascript Engine. This means that static 
            web pages can use dynamic scripting without a run-time penalty when the site is live.</p>

            <h2>Creating Dynamic Pages</h2>
            <p>If a source page, layout or partial has a <em>.exp</em> extension, it will be processed by 
            the Expansive Ejscript service. Javascript code is defined between the <em>&lt;&#64; code &#64;&gt;</em>
            tags. For example:</p> 

            <pre class="code">&lt;p&gt;Today's date is &lt;&#64;= Date() @&gt;</pre>

                <p>The <em>&lt;&#64;=</em> sequence means run the Javascript expression and paste the result here.
                The <em>&lt;&#64;</em> sequence (without the equals) means run the Javascript code and do not 
                paste any result. This is useful to iterate over html elements. For example:</p>

            <pre class="code">&lt;ul&gt;
    &lt;@ for (i = 0; i &lt; 10; i++) { @&gt;
        &lt;li&gt; Item &lt;&#64;= i @&gt; &lt;/li&gt;
    &lt;@ } @&gt;
&lt;/ul&gt;</pre>
                <p>This will emit ten item lines.</p>

            <pre class="code">&lt;ul&gt;
    &lt;li&gt; Item 0 &lt;/li&gt;
    &lt;li&gt; Item 1 &lt;/li&gt;
    &lt;li&gt; Item 2 &lt;/li&gt;
    &lt;li&gt; Item 3 &lt;/li&gt;
    &lt;li&gt; Item 4 &lt;/li&gt;
    &lt;li&gt; Item 5 &lt;/li&gt;
    &lt;li&gt; Item 6 &lt;/li&gt;
    &lt;li&gt; Item 7 &lt;/li&gt;
    &lt;li&gt; Item 8 &lt;/li&gt;
    &lt;li&gt; Item 9 &lt;/li&gt;
&lt;/ul&gt;
</pre>
                <h3>Short Forms</h3>
                <p>Because variable substitution is so common, Expansive provides some convenient short forms. 
                These can be used outside <em>&lt;@ @&gt;</em> delimiters.</p>
                <ul>
                    <li><em>&#64;=expression</em> &mdash; to substitute the expression value (no spaces in expression)</li>
                    <li><em>&#64;={expression}</em> &mdash; to substitute the expression value</li>
                    <li><em>&#64;~</em> &mdash; to replace with the relative URL to the application home (top)</li>
                    <li><em>&#64;&#64;</em> &mdash; to get a single literal '@' in the rendered document.</li>
                </ul>

                <pre class="code">&lt;p&gt;Generated on <b>&#64;=meta.date</b> &lt;/p&gt;</pre>

                <h3>Relative URLs</h3>
                <p>The <em>&#64;~</em> short form can be very useful when constructing relative URLs that may vary depending
                on what URL the application is hosted.</p>

                <pre class="code"> &lt;a href="&#64;~/admin/index.html"&gt;&lt;button ...&gt;&lt;/a&gt;</pre>
